<template>
    <div>
        <el-table
            :data="tableD.datas"
            border
            @selection-change="handleSelectionChange"
            empty-text="暂无数据">
            <!-- 是否多选 -->
            <el-table-column
                v-if="selection"
                type="selection"
                width="55"/>
                
            <!-- 表头配置 -->
            <template v-for="(item, i) in tableD.columns">
                <!-- 索引 -->
                <el-table-column
                    v-if="item.type && item.type == 'index'"
                    :label="item.title"
                    :width="item.width"
                    type="index"/>

                <!-- 内容 -->
                <el-table-column
                    v-if="item.key"
                    :prop="item.key"
                    :label="item.title"
                    :width="item.width"/>

                <!-- 自定义内容 -->
                <el-table-column
                    v-if="item.slot"
                    :label="item.title"
                    :width="item.width">
                    <template slot-scope="scope" >
                        <slot :name="item.slot" :row="scope" />
                    </template>
                </el-table-column>            
            </template>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            v-if="tableD.page"
            background
            layout="total, prev, pager, next, jumper"
            :page-size="tableD.page.PageSize"
            :current-page="tableD.page.PageIndex"
            :total="tableD.page.Count"
            @current-change="currentChange">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "el-Table",
    props: {
        // 表格数据
        tableD: {
            type: Object
        },
        // 是否开启多选
        selection: {
            type: Boolean,
        },
    },
    data () {
        return {
            activeNames: ['1']
        }
    },
    components: {
        
    },
    mounted () {

    },
    methods: {
        // 在点击复选框模式下有效，只要选中项发生变化时就会触发
        handleSelectionChange (row) {
            this.$emit('selection-change', row);
        },
        currentChange(val){
            console.log(val);
        },
        // prevClick(val){
        //     console.log(val);
        // },
        // nextClick(val){
        //     console.log(val);
        // },
    },
}
</script>

<style lang="less" scoped>
.el-table{
    margin: 10px 0;
    // 修改表头背景色
    /deep/ thead{
        color: #515A6E;
        background-color: #f8f8f9;
        & th {
            background-color: transparent;
        }
        & tr {
            background-color: transparent;
        }
    }
}    

</style>